<template>
  <el-drawer
    :visible="show"
    :size="width"
    :append-to-body="true"
    @close="close"
  >
    <!-- 抖音支付设置 -->
    <div slot="title" class="rowFlex columnCenter titleSet">
      <p class="title">支付设置</p>
      <el-tooltip class="item" effect="dark" content="登录抖音开放平台->控制台->能力->支付->支付方式管理查看" placement="top">
        <svg-icon icon-class="question" class="question" />
      </el-tooltip>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="addPay">
        <el-form-item label="Token(令牌)" prop="pay_token">
          <el-input v-model="form.pay_token" clearable placeholder="请输入Token"></el-input>
        </el-form-item>
        <el-form-item label="SALT" prop="pay_salt">
          <el-input v-model="form.pay_salt" clearable placeholder="请输入SALT"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button class="btn" @click="close">取 消</el-button>
      <el-button class="btn" type="primary" :loading="loading" @click="submit">确 定</el-button>
    </span>
  </el-drawer>
</template>

<script type="text/javascript">
import { douYinMiniAppPay } from '@/api/miniApp'
export default {
  props: ['show', 'width', 'title', 'rowInfo'],
  data() {
    return {
      form: {
        id: '',
        pay_token: '',
        pay_salt: ''
      },
      loading: false,
      rules: {
        pay_token: [
          { required: true, message: '请输入Token', trigger: 'blur' }
        ],
        pay_salt: [
          { required: true, message: '请输入SALT', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        this.form.id = this.rowInfo.id
        this.form.pay_token = this.rowInfo.pay_token
        this.form.pay_salt = this.rowInfo.pay_salt
      }
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.form.id = this.rowInfo.id
          douYinMiniAppPay(this.form).then(res => {
            this.loading = false
            if (res.status_code === 1) {
              this.$message.success(res.msg)
              this.$emit('confirm')
              this.close()
              this.form = {
                id: '',
                pay_token: '',
                pay_salt: ''
              }
            }
          }, err => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>

  ::v-deep .el-drawer{
    height: 100%;
    overflow: auto;
  }

  .content{
    width: 400px;
    height: auto;
    margin-top: 40px;
  }
  .titleSet{
    font-size: 16px;
    color: #333;
  }
  .question{
    color: #333333;
    font-weight: bolder;
    font-size: 16px;
    margin-left: 10px;
  }

  .dialog-footer{
    width: 100%;
    height: auto;
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    justify-content: flex-end;
    background: #fff;
    .btn{
      width:84px ;
      height: 32px;
    }
  }
  </style>
